/* 
CSS Document
◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇
◆ *@Description: 样式表CSS基类
◇ *@Author: 谭生虎™       TanShenghu	TSH    
◆ *@Update: 2012-06-17
◇ *@Contact: ☎：13588428548		Email: tanshenghu@163.com	QQ：511568692
◆ *@AuthorNote: 请不要随便篡改层叠样式表内容。尊重他人劳动成果！谢谢...     谭生虎 注
◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇
※※※#CDE6FE   A标签天蓝色#2b99ff
很神奇的css属性,穿过click事件：pointer-events: auto/none;
*/

// 为方便pc与app端 单位定位变量
// @unit: 0.01rem; // @unit: 0.01rem or @unit: 1px;

//   common Function
@import "fn_Base.less";

@charset "utf-8";
article,aside,dialog,footer,header,section,nav,figure,menu,details,figcaption,hgroup{
    .dis;
    .margin(0);
    .padding(0);
    word-break:break-all;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,input,button,textarea,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{
    .margin(0);
    .padding(0);
    word-break:break-all;
}
html,body{
    min-height:100%;
}
html{.posrel;}
//   针对于h5移动端的一些样式
// @import "app.less";

body{
    font-family:tahoma,Microsoft YaHei,"\5FAE\8F6F\96C5\9ED1",arial,Hiragino Sans GB,"\5B8B\4F53";
    cursor:default;
}

._3D{
    -webkit-transform-style:preserve-3d;// flat 是2D展示 默认值  perspective 3D舞台大小
    transform-style:preserve-3d;
}

a{
    .fc( #1eb1d7 );
    text-decoration:none;
}
i{
    -moz-osx-font-smoothing:grayscale; // 主要针对图标字体更清晰
    .middle;
}
img{
    border:none;
    // html5 图片与父级底部边距问题，解决方法有。低级设置font-size:0,图片设置vertical-align,displace:block,三种方法，最土的方法就是定义父级宽高并溢出隐藏
    .middle;
    .border-box;
    max-width:100%;
    -ms-interpolation-mode:bicubic; // ie特有属性，防止图片因缩放失贞
}
a,input,button{
    outline:none;
    hide-focus:~"expression(this.hideFocus=true)";
}
input::-moz-focus-inner,button::-moz-focus-inner{ // firefox 玩特殊化，普通的outline不起作用
    border:none;
}
input:-webkit-autofill{ // chrome autocomplate
    background-color:transparent;
    box-shadow:0 0 0 1000px white inset;
}
input::-ms-clear,input::-ms-reveal{ // ie10 input 清空叉叉
    .undis;
}
[type="submit"],[type="button"],button{.middle;.hand;.fc( #666 );}
input[type="text"],input[type="password"],input[type="tel"],input[type="email"],input[type="url"],input[type="search"]{
    .W( 132px );
    .pl( 5px );
    .pr( 5px );
    .fc( #666 );
    .border-box;
}
textarea{
    .fc( #666 );
    .border-box;
    padding: @unit*5px @unit*7px;
    line-height:@unit*23px;
    resize:none;
}
template{.undis;}
select{
    .padding( @unit*3px );
    .fc( #666 );
}
input,textarea,select{
    outline:none;
    .middle;
    
    &:focus{
        -webkit-box-shadow:inset 0 @unit*1px @unit*1px rgba(0,0,0,.075), 0 0 @unit*8px rgba(102, 175, 233, .6);
        box-shadow:inset 0 @unit*1px @unit*1px rgba(0,0,0,.075), 0 0 @unit*8px rgba(102, 175, 233, .6);	
    }
}
input,textarea,select,h1,h2,h3,h4,h5,h6,th{
    font-size:100%;
    font-weight:normal;
}
table{
    border-collapse:collapse;
    border-spacing:0;
}
th,td{
    padding:@unit*3px @unit*5px;
}
li{
    list-style:none;
}
mark{background-color:transparent;}
pre{
    white-space:-moz-pre-wrap;
    white-space:-pre-wrap;
    white-space:-o-pre-wrap;
    white-space:pre-wrap;
    word-wrap:break-word;
}
address,cite,dfn,em,var,i{
    font-style:normal;
}
ins{
    text-decoration:none;
}
code,kbd,pre,samp{
    font-family:courier new,courier,monospace;
}
.clearfix:after,.formfield:after{
    clear:both;
    .fz( 0 );
    content:"\20";
    visibility:hidden;
    .dis;
    height:0;
}
*body .clearfix,.zoom,.formfield{
    zoom:1;
}
.left{
    float:left;
}
.right{
    float:right;
}
.fl{
    float:left;
    display:inline;
}
.fr{
    float:right;
    display:inline;
}
.clear{
    clear:both;
    height:@unit*1px;
    .fz( @unit*1px );
    .dis;
    .overhide;
}
.wspace{
    white-space:nowrap;
}
.wbreak{
    word-wrap:break-word;
    word-break:break-all;// 强制单词换行
}
.overhide{
    overflow:hidden;
}
.middle{
    vertical-align:middle;
}
.posrel{
    position:relative;
}
.posabs{
    position:absolute;
}
.dis{
    display:block;
}
.undis{
    display:none;
}
.I-B{ // 由inline转向inline-block
    display:inline-block;
}
.B-I{ // 由块级元素block转向inline-block
    display:inline-block;
    *display:inline;
}
.inline{ // 转化为行内元素
    display:inline;
}
.b{
    font-weight:bold;
}

.mt3{.mt( 3px );}.mb3{.mb( 3px );}.ml3{.ml( 3px );}.mr3{.mr( 3px );}.mAll3{.margin( @unit*3px );}
.mt5{.mt( 5px );}.mb5{.mb( 5px );}.ml5{.ml( 5px );}.mr5{.mr( 5px );}.mAll5{.margin( @unit*5px );}
.mt7{.mt( 7px );}.mb7{.mb( 7px );}.ml7{.ml( 7px );}.mr7{.mr( 7px );}.mAll7{.margin( @unit*7px );}
.mt10{.mt( 10px );}.mb10{.mb( 10px );}.ml10{.ml( 10px );}.mr10{.mr( 10px );}.mAll10{.margin( @unit*10px );}

.pt3{.pt( 3px );}.pb3{.pb( 3px );}.pl3{.pl( 3px );}.pr3{.pr( 3px );}.pAll3{.padding( @unit*3px );}
.pt5{.pt( 5px );}.pb5{.pb( 5px );}.pl5{.pl( 5px );}.pr5{.pr( 5px );}.pAll5{.padding( @unit*5px );}
.pt7{.pt( 7px );}.pb7{.pb( 7px );}.pl7{.pl( 7px );}.pr7{.pr( 7px );}.pAll7{.padding( @unit*7px );}
.pt10{.pt( 10px );}.pb10{.pb( 10px );}.pl10{.pl( 10px );}.pr10{.pr( 10px );}.pAll10{.padding( @unit*10px );}

.border-box{
    box-sizing:border-box;
}
                                                         
.fontNum{
    font-family:"Georgia";
}
.fontYH{
    font-family:Microsoft Yahei,"\5FAE\8F6F\96C5\9ED1",Tahoma,Arial;
}
.fontArl{
    font-family:arial;
}
.fontST{
    font-family:"\5B8B\4F53";
}
// 块级元素 垂直居中 以前写法，最新采用 centerMiddle
.center_middle{
    display: table-cell;
    .middle;
    text-align:center;
    *display: block;
    *font-size: @unit*175px;
    *font-family:Arial;
    .W(200px);
    .H(200px);
}
// 块级元素 垂直居中 来源蚂蚁金服web ppt摘抄
.centerMiddle{
	-webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-box-align: center;
    box-align: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-box-pack: center;
    box-pack: center;
}
.marCenter{
    .ml(auto);
    .mr(auto);
}
.text_center{
    text-align:center;
}
.text_right{
    text-align:right;
}
.ellipsis{
    text-overflow:ellipsis;
    .wspace;
    .overhide;
}
.curDefault{
    cursor:default;
}
.hand{
    cursor:pointer;
}
.selectBgColor();
.No_Select{
	-webkit-touch-callout:none;
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.placeholder-label{
    .fc( #666 );
    .pl( 7px );
}
// 下拉框 浮层
.dropDownContent{
    .undis;
    .posabs;
}
.label-checkbox{
    .mr( 5px );
    .middle;
    .hand;
    .No_Select;
    s{
        .undis;
    }
    span{
        //.middle;
        .hand;
        .pl( 4px );
    }
}
:root .label-checkbox{
    [type="radio"],[type="checkbox"]{
        .undis;
    }
    s{
        .I-B;
    }
    
}
.label-checkbox{
    
    [type="checkbox"] + s{
        .WH( 14px );
        background-image:url();
        background-repeat:no-repeat;
        background-position:left center;
        vertical-align:-2px;
    }
    [type="radio"] + s{
        .WH( 15px );
        background-image:url();
        background-repeat:no-repeat;
        background-position:left center;
        .middle;
    }
    
    [type="checkbox"]:checked + s{
        background-image:url();
    }
    [type="radio"]:checked +s {
        background-image:url();
    }
    // ==============================================================
    [type="checkbox"]:disabled + s{
        background-image:url();
    }
    [type="radio"]:disabled +s {
        background-image:url();
    }
    
    [type="checkbox"]:checked:disabled + s{
        background-image:url();
    }
    [type="radio"]:checked:disabled +s {
        background-image:url();
    }
    
}